<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./mui/css/mui.min.css">
    <style>
        html,
        body {

            background-color: #efeff4;
        }

        .mui-bar .mui-pull-left .mui-icon {
            padding-right: 5px;
            font-size: 28px;
        }

        .mui-bar .mui-btn {
            font-weight: normal;
            font-size: 17px;
        }

        .mui-bar .mui-btn-link {
            top: 1px;
        }

        .mui-table-view li{
            color: blueviolet
        }

        .conference_detail{
            width: 100%;
            height: 200px;
            margin: 10px auto;
            padding: 30px;
            border-radius: 20px;
            background: url('imges/timg (1).jpg') no-repeat center ;
        }

        .conference_detail p{
            text-align: center;
            font-size:16px;
            color: #fff;
        }
        .conference_detail p span{
            display: inline-block;
            height: 30px;;

        }



        .sign_in{
           width: 130px;
           height: 130px;
          
           border-radius: 50%;
           margin: 30px auto;
           background: url('./imges/timg.jpg') no-repeat  center;
           background-size: 180px 130px;
        }

      #menu{
          height: 400px;
          position: relative;
      }
      #menu p{
          font-size: 50px;
          line-height: 400px;
      }

      .footer{
          width: 100%;
          height: 100px;
          background-color: skyblue;
          position: fixed;
          bottom: 0;
      }
/* .................................................................................................................. */
        html,
			body {
				min-height: 100%;
				background-color: #efeff4;
			}
			.animated {
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			@-webkit-keyframes bounceInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 5px, 0);
					transform: translate3d(0, 5px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			@keyframes bounceInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 5px, 0);
					transform: translate3d(0, 5px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			.bounce-in-down {
				-webkit-animation-name: bounceInDown;
				animation-name: bounceInDown;
			}
			@-webkit-keyframes fadeInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			@keyframes fadeInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			.fade-in-down {
				-webkit-animation-name: fadeInDown;
				animation-name: fadeInDown;
			}
			@-webkit-keyframes bounceOutUp {
				20% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 20px, 0);
					transform: translate3d(0, 20px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
			}
			@keyframes bounceOutUp {
				20% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 20px, 0);
					transform: translate3d(0, 20px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
			}
			.bounce-out-up {
				-webkit-animation-name: bounceOutUp;
				animation-name: bounceOutUp;
			}
			@-webkit-keyframes fadeOutUp {
				20% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
			}
			@keyframes fadeOutUp {
				20% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
			}
			.fade-out-up {
				-webkit-animation-name: fadeOutUp;
				animation-name: fadeOutUp;
			}
			.menu-open {
				height: 100%;
				width: 100%;
			}
			.menu-open .mui-scroll-wrapper {
				position: absolute;
				top: 48;
				bottom: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				overflow: hidden;
				-webkit-backface-visibility: hidden;
			}
			.menu-backdrop {
				display: none;
			}
			.menu-open .menu-backdrop {
				position: fixed;
				top: 0;
				bottom: 0;
				height: 100%;
				width: 100%;
				display: block;
				z-index: 998;
			}
			.menu-wrapper {
				position: absolute;
				top: 48px;
				left: 0;
				right: 0;
				z-index: 999;
				text-align: center;
				background-color: #333;
				width: 100%;
			}
			.menu-wrapper.hidden {
				-webkit-transform: translate3d(0, -100%, 0);
				transform: translate3d(0, -100%, 0);
				z-index: -1;
			}
			.menu {
				width: 100%;
			}
			.menu .mui-table-view-inverted {
				color: gray;
				font-size: 19px;
			}
			.menu .mui-table-view-inverted .mui-table-view-cell:after {
				height: 2px;
				left: 0;
				right: 0;
			}
			.menu-wrapper.mui-active,
			.menu-wrapper.mui-active .menu {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			#info{
			  	padding: 20px 10px ;

                width: 130px;
                height: 130px;
			 }


       


        
    </style>
</head>
<body>
    <header id="header" class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">会议详情</h1>
        <a class="mui-icon mui-icon-bars mui-pull-right" id="display"></a>

    </header>

    <div class="mui-content">

        <div class="conference_detail">
			<p>
				武汉南湖绿化改造工程项目会议
			</p>
            <p>会议时间：
                <span>2019-5-13 10:00</span>
            </p>
            <p>会议地点：
                <span>南湖创意天地</span>
            </p>
            <p>与会人员：
                <span>张三、张三</span>
            </p>
            
        </div>



        <div class="sign_in">

            <div class="mui-content-padded" id="menu-btn" >
          
              
                <div id="info"></div>
            </div>             
                        
            
        </div> 

        <!-- <div id="info">
            <div class="sign_in">

                <div class="mui-content-padded" id="menu-btn" >
              
                  
                   
                </div>             
                            
                
            </div>

        </div> -->






        <div class="footer">

            <div class="conference_record"></div>
            <div class="conference_video"></div>
        </div>


    </div>


    <!--...........................................下沉框............................. -->
    <div id="menu-wrapper" class="menu-wrapper hidden">
        <div id="menu" class="menu">
          <p> 已签到</p>
        </div>
    </div>


    <div id="menu-backdrop" class="menu-backdrop"></div>

    <script src="./mui/js/mui.min.js"></script>
    <script>
        mui.init({
            swipeBack:true //启用右滑关闭功能
        });
        var menuWrapper = document.getElementById("menu-wrapper");
        var menu = document.getElementById("menu");
        var menuWrapperClassList = menuWrapper.classList;
        var backdrop = document.getElementById("menu-backdrop");
        var info = document.getElementById("info");
        
        backdrop.addEventListener('tap', toggleMenu);

        document.getElementById("menu-btn").addEventListener('tap', toggleMenu);
        
        //下沉菜单中的点击事件
       
        var busying = false;

        function toggleMenu() {
            if (busying) {
                return;
            }
            busying = true;
            if (menuWrapperClassList.contains('mui-active')) {
                document.body.classList.remove('menu-open');
                menuWrapper.className = 'menu-wrapper fade-out-up animated';
                menu.className = 'menu bounce-out-up animated';
                setTimeout(function() {
                    backdrop.style.opacity = 0;
                    menuWrapper.classList.add('hidden');
                }, 500);
            } else {
                document.body.classList.add('menu-open');
                menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active';
                menu.className = 'menu bounce-in-down animated';
                backdrop.style.opacity = 1;
            }
            setTimeout(function() {
                busying = false;
            }, 500);
        }
    </script>


</body>
</html>